// 三个组件 template  script  style 
//{{}} 是vue的特殊语法
<template>
    <div>
        <input type="checkbox" name="" id="" :checked="isDone" @change="$emit('checkbox-changed')">
        <label :for="id">{{label}}</label>
    </div>
</template>
<script>
// props 作为单向数据绑定
export default {
    props:{
        label:{required:true,type:String},
        done:{default:false,type:Boolean},
        id:{required:true,type:String}
    },
    // data 属性是一个函数,从内部数据访问组件的道具和其他属性
    data(){
        return {
            isDone:this.done
        }
    }
}
</script>
<style>

</style>